<template>
  <div id="big" >
    <pull-to :top-load-method="refresh" :bottom-load-method="refresha">
      <div class="big">

        <div v-if="arr===false||arr==''">
          <li class="list_wu">
              <div class="wu">
                <img src="../img/back.png" alt="" class="bga"><br>
              </div><br>
              <div class="wu_wz">
                <div class="wz">
                  <span>客源多的销售需要与同样厉害的人交换客源！</span>
                  <span>多多邀请你的客户，壮大你的客源人数，</span>
                  <span>进入「我的客户」页面，分享链接给你的客户，</span>
                  <span>会有越来越多的销售和您主动请求互换资源！</span>
                </div>
              </div>
          </li>
        </div>
        <div v-else>
          <div class="sec-box" v-for="(item,index) in this.arr" :key="index" >
            <a class="haha" :href="'yqlh://BDetail_user_id='+item.userInfoNew.user_id">

            </a>

            <section class="box-a" >

              <div class="img">
                <img :src="item.userInfoNew.avatar_head" />
              </div>
              <div class="cont">
                <div>
                  <span>{{item.userInfoNew.nickname}}</span>
                  <!-- <span>{{item.userInfo.industry_id}}</span> -->
                  <span class="hang">{{item.userInfoNew.storeInfo.industry_name}}</span>
                </div>
                <div>
                  {{item.userInfoNew.storeInfo.store_name}}
                </div>
                <div>
                  <span>拥有客源量:<span class="spanky">{{item.userInfoNew.myc}}人</span></span>

                  <span>距离:{{item.km}}</span>
                  <span class="succ">{{time(item.end_time)}} 到期</span>
                </div>
                <a  :href="'yqlh://user_id='+item.userInfoNew.user_id+'&nickname='+item.userInfoNew.nickname+'&headimg='+item.userInfoNew.avatar_head+'&relation_status=3'+'&relation_type=3'">
                    <button class="gou">
                        沟通
                    </button>
                </a>

              </div>
            </section>
          </div>
        </div>

      </div>
    </pull-to>
  </div>
</template>
<script>

import axios from 'axios'
import PullTo from 'vue-pull-to'
import {MP} from '../../../common/js/loadMap';
export default {
  name: 'example',
  components: {
    PullTo
  },
  data(){
      return{
        lat:"",
        lng:"",
        a:"hybrid",
        page:1,
        arr:{ },
        str:{
          x:"暂无"
        },
        change:"交换",
        change_a:"申请中",
        errNetwork:false,
        token:this.GLOBAL.serverSrc
      }
  },
  created(){
    var that = this;
    //alert(that.$route.query.gps_lng)
    if(that.$route.query.gps_lng!=""&&that.$route.query.gps_lat!=""){
      that.lng=that.$route.query.gps_lng;
      that.lat=that.$route.query.gps_lat;
    }
    that.getData()
  },
  methods: {
    getData(){
      var url=this.token+'/user/request';
      var obj={
        user_id:this.$route.query.userid,
        relation_status:1,
        gps_lng:this.lng,
        gps_lat:this.lat,
        driver_uuid:this.a
      }
     var thet=this;
      this.$axios.post(url,obj).then(response=>{
          thet.arr=response.data.data
          //console.log(thet.arr)
      })
      .catch(function(error) {
          console.log(error);
      });
    },
    //转化时间
    time(nows){
       var now = new Date(nows*1000);
       var year = now.getFullYear();
       var month = now.getMonth() + 1;
       var date = now.getDate();
       return year + "-" + month + "-" + date;
    },
    refresh(loaded) {
      setTimeout(() => {
        this.getData();
      //  this.dataList.reverse();
        loaded('done');
      }, 200);
    },
    refresha(loaded){
      setTimeout(() => {
        this.page++;
        var url=this.token+"/user/request?page="+this.page;
        var obj;
        if(this.lat>0&&this.lng>0){
          obj={
              user_id:this.$route.query.userid,
              gps_lng:this.lng,
              gps_lat:this.lat,
              driver_uuid:this.a
            }
        }else{
          obj={
              user_id:this.$route.query.userid
            }
        }

        var thet=this;
        //alert(this.lat)
        this.$axios.post(url,obj).then(response=>{
          response.data.data.forEach((item, index) => {
              thet.arr.push(item)
          })
        })
        .catch(function(error) {
            console.log(error);
        });
        loaded('done');
      }, 200);
    }
  }
}

</script>
<style lang="scss" scoped>
.big:nth-last-of-type(1){
  margin-bottom:1.3rem;
}
img{ pointer-events: none;vertical-align: sub;}
#big{
  width:100%;
  height:100%;
  overflow-x: hidden;
  overflow-y: scroll;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.sec-box {
  width: 3.54rem;
  height: 0.87rem;
  background: #FFFFFF;
  border-radius: 0.1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 0.1rem;
  position: relative;
  .haha{
    width:2.85rem;
    height:0.78rem;
    display: inline-block;
    text-decoration: none;
    position: absolute;
    left:0;
    top:0;
    z-index:5;
  }

  .box-a {
    width: 3.54rem;
    height: 0.78rem;
    display: flex;
    //justify-content: space-around;
    align-items: center;
    z-index:1;
    .img {
      width: 0.59rem;
      height: 0.59rem;
      margin-left:0.09rem;
      img {
        width: 100%;
        height: 100%;
        border-radius:0.05rem;
      }
    }
    .cont {
      width: 78%;
      height: 0.59rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position:relative;
      margin-left:0.1rem;
      .gou{
        width:0.59rem;
        height:0.2rem;
        border:none;
        outline:none!important;
        color:#46DCC3;
        font-size:0.12rem;
        border-radius:0.19rem;
        position:absolute;
        top:0;
        left:1.95rem;
        background:rgb(227,250,247);
        z-index:6;
      }
      div:nth-of-type(1) {
        width: 100%;
        display: flex;
        align-items: center;
        margin-top:0.05rem;
        span:nth-of-type(1){
          max-width:0.9rem;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          height:0.2rem;
          line-height: 0.2rem;
          font-size: 0.15rem;
          font-weight: bold;
          color: #000000;
        }
        // span:nth-of-type(2) {
        //   color: #636363;
        //   font-size: 0.12rem;
        //   margin-left: 0.1rem;
        // }
        .hang{
          display: inline-block;
          height:0.14rem;
          line-height:0.16rem;
          color: #46DCC3;
          font-size: 0.1rem;
          margin-left: 0.1rem;
          background:rgb(226,250,247);
          padding:0 0.02rem;
        }
      }
      div:nth-of-type(2) {
        // max-width:2.7rem;
        // overflow: hidden;
        // text-overflow:ellipsis;
        // white-space: nowrap;
        // height:0.3rem;
        // line-height: 0.12rem;
        color: #636363;
        font-size: 0.12rem;
        margin-top:0.05rem;
      }
      div:nth-of-type(3) {
        width: 100%;
        margin-top:0.03rem;
        span:nth-of-type(1) {
          font-size: 0.12rem;
          color: #636363;
          .spanky{
            font-size: 0.12rem;
            color: #46DCC3;
          }
        }
        span:nth-of-type(2){
          font-size: 0.12rem;
          color: #636363;
        }
        .succ{
          color:#FF7928;
          font-size:0.11rem;

        }
      }

    }
  }

}

.list_wu{
  width:3.54rem;
  height:2.2rem;
  background: #FFFFFF;
  border-radius:0.05rem;
  position:relative;
  margin-bottom: 0.05rem;
  display:flex;
  flex-wrap:wrap;
  align-content:center;
  .wu{
    width:100%;
    display:flex;
    justify-content: center;
    align-items: center;
    margin-bottom:0.16rem;
    .bga{
      width:1.6rem;
      height:0.8rem;
    }
  }
  .wu_wz{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
    align-items:space-around;
    color:#939393;
    font-size:0.13rem;
    .wz{

      span{
        width:100%;
        display:flex;
        margin-bottom:0.05rem;
        //justify-content:center;
      }
    }
  }
}
a{
  text-decoration:none;
}
</style>
